<template>
  <section class="tool-wrap">
    <h1>SCSS 转 CSS</h1>

    <div class="grid">
      <div class="card">
        <label>输入 SCSS：</label>
        <textarea v-model="scssInput" class="code-input" rows="12" placeholder="$color: #6366f1;\n.button {\n  color: $color;\n  &:hover { color: darken($color, 6%); }\n}"></textarea>
        <div class="controls">
          <select v-model="outputStyle" class="select">
            <option value="expanded">展开样式</option>
            <option value="compressed">压缩样式</option>
          </select>
          <button class="btn btn-primary" @click="compileScss">编译</button>
          <button class="btn btn-danger" @click="clearAll">清空</button>
        </div>
      </div>

      <div class="card">
        <label>输出 CSS：</label>
        <pre class="code-output">{{ cssOutput }}</pre>
        <div class="controls">
          <button class="btn btn-success" @click="copyCss">复制结果</button>
        </div>
      </div>
    </div>

    <div class="status">
      <div v-if="compilerError" class="error">{{ compilerError }}</div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { useUiStore } from '@/stores/ui'
import http from '@/utils/http'

const ui = useUiStore()

const scssInput = ref('')
const cssOutput = ref('')
const outputStyle = ref('expanded')
const compilerError = ref('')
async function compileScss() {
  try {
    const resp = await http.post('/api/scss/compile', {
      scss: scssInput.value || '',
      style: outputStyle.value,
    })
    if (resp.data && typeof resp.data.css === 'string') {
      cssOutput.value = resp.data.css
      compilerError.value = ''
      ui.showToast('编译成功', 'success')
    } else {
      const msg = resp.data && resp.data.message ? resp.data.message : '编译失败'
      compilerError.value = msg
      cssOutput.value = ''
      ui.showToast(msg, 'error')
    }
  } catch (e) {
    const msg = e.response?.data?.message || e.message || '编译异常'
    compilerError.value = msg
    cssOutput.value = ''
    ui.showToast('编译异常：' + msg, 'error')
  }
}

function clearAll() {
  scssInput.value = ''
  cssOutput.value = ''
  compilerError.value = ''
}

async function copyCss() {
  if (!cssOutput.value) {
    ui.showToast('没有内容可复制', 'error')
    return
  }
  try {
    await navigator.clipboard.writeText(cssOutput.value)
    ui.showToast('已复制到剪贴板！', 'success')
  } catch (e) {
    ui.showToast('复制失败：' + e.message, 'error')
  }
}
</script>

<style scoped>
.tool-wrap { max-width: 1100px; margin: 0 auto; }
h1 { color: var(--color-primary); text-align: center; font-weight: 700; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label { font-weight: 600; color: var(--color-text); display: block; margin-bottom: 8px; }
.code-input { width: 100%; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; background: #fff; }
.code-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.code-output { min-height: 240px; white-space: pre-wrap; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; font-family: 'Courier New', monospace; font-size: 14px; }
.controls { display: flex; gap: 10px; margin-top: 10px; }
.select { padding: 10px; border-radius: 10px; border: 1px solid var(--color-border); }
.status { margin-top: 12px; }
.error { background: #fee2e2; color: #991b1b; padding: 10px; border-radius: 8px; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }
</style>